<template>
    <div class="user-index">
        <div class="wrapper have-footer" v-if='pageLoaded'>
            <div class="user-info" @click='goUserMine'>
                <template v-if='!needLogin'>
                    <img :src="user.avatar || placeholderImg" class="user-avatar">
                    <div class="user-name">
                        <p class="name" v-if='user.realName'>{{ user.realName }}</p>
                        <p class="name" v-else>{{ user.mobile | mobile }}</p>
                        <p class="auth" v-if='userInfo.authState == "no"'>未认证</p>
                        <p class="auth" v-if='userInfo.authState == "noComplete"'>认证未完成</p>
                        <p class="auth" v-if='userInfo.authState == "ok"'>认证有效</p>
                        <p class="auth" v-if='userInfo.authState == "unless"'>信用报告失效</p>
                    </div>
                </template>
                <template v-else>
                    <div class="please-login">
                        <p class='font-body1'>欢迎使用“有借”</p>
                        <p class='font-title'>请先注册／登录</p>
                    </div>
                </template>
                <div class="user-icon">   
                    <span class="user-msg" @click.stop='goRouter("message-box")'><i v-if='mainInfo.unReadMsgCount'>{{mainInfo.unReadMsgCount}}</i></span>
                    <span class="user-option"></span>
                </div>
            </div>
            <template v-if='hasMain && !needLogin'>
                <div class="user-money voucher" @click='goRouter("user-my-voucher")' v-if='userInfo.user && userInfo.user.bizRole == "B"'>
                    <div class="user-money__left">我的点券</div>
                    <div class="user-money__right">
                        <p class="user-money__number voucher">{{ mainInfo.scoreBalance | toYuan('int') }} <i class='unit'>点</i></p>
                        <div class="user-money__detail"><span class='button short' @click.stop='goRouter("user-recharge-voucher")'>充值点券</span></div>
                    </div>
                </div>
                <div class="user-money" @click='goUserWithDraw' v-if='mainInfo.balance'>
                    <div class="user-money__left">我的钱包（元）</div>
                    <div class="user-money__right">
                        <p class="user-money__number">{{ mainInfo.balance | toYuan }} <i class='iconfont icon-arrow'></i></p>
                    </div>
                </div>
            </template>
            <template v-if='needLogin'>
                <div class="user-bottons flex-end">
                    <span class="button short login-button" @click='goRouter("bind-phone")'>立即注册／登录</span>
                </div>
            </template>
            <template 
                v-if='borrowInfo.borrowAmount!=0 || borrowInfo.borrowRecent7DayWaiteRepayAmount!=0 || borrowInfo.borrowOverdueAmount!=0 '>
                <h1 class="big-title">借入资金</h1>
                <div class="capital">
                    <div class="capital__left" @click='goRouter("user-loan-in")'>
                        <p>{{ borrowInfo.borrowAmount | toYuan }}</p>
                        <span>已借入</span>
                    </div>
                    <div class="capital__right" @click='goRouter("user-loan-in-detail")'>
                        <div class="capital__right-box">
                            <div class="capital__item">
                                <p>{{ borrowInfo.borrowRecent7DayWaiteRepayAmount | toYuan }}</p>
                                <span>7天待还</span>
                            </div>
                            <div class="capital__item">
                                <p>{{ borrowInfo.borrowOverdueAmount | toYuan }}</p>
                                <span>已逾期</span>
                            </div>
                        </div>
                    </div>
                </div>
            </template>
            <template v-if='lendInfo.lendAmount!=0 || lendInfo.lendRecent7DayWaiteReceiveAmount!=0 || lendInfo.lendOverdueAmount!=0 '>
                <h1 class="big-title">出借资金</h1>
                <div class="capital">
                    <div class="capital__left" @click='goRouter("user-loan-out")'>
                        <p class='purple'>{{ lendInfo.lendAmount | toYuan }}</p>
                        <span>已出借</span>
                    </div>
                    <div class="capital__right" @click='goRouter("user-loan-out-detail")'>
                        <div class="capital__right-box">
                            <div class="capital__item">
                                <p>{{ lendInfo.lendRecent7DayWaiteReceiveAmount | toYuan }}</p>
                                <span>7天待收</span>
                            </div>
                            <div class="capital__item">
                                <p>{{ lendInfo.lendOverdueAmount | toYuan }}</p>
                                <span>已逾期</span>
                            </div>
                        </div>
                    </div>
                </div>
            </template>
            <h1 class="big-title">我的补借条</h1>
            <div class="capital iou" @click='goRouter("loan-IOU-list")'>
                <div class="capital__item">
                    <p>{{ receiptInfo.waitConfirmCount || placeholder }}</p>
                    <span>待确认</span>
                </div>
                <div class="capital__item">
                    <p>{{ receiptInfo.waitingCount || placeholder }}</p>
                    <span>进行中</span>
                </div>
                <div class="capital__item">
                    <p>{{ receiptInfo.repaidCount || placeholder }}</p>
                    <span>已完结</span>
                </div>
            </div>

            <contact></contact>

            <div class="user-slogen">
                <p class="user-slogen__item"> <img src="../images/user_slogen1.png"> <span>信息透明</span></p>
                <p class="user-slogen__item"> <img src="../images/user_slogen2.png"> <span>认证可靠</span></p>
                <p class="user-slogen__item"> <img src="../images/user_slogen3.png"> <span>资金安全</span></p>
            </div>
        </div>


        <footer-bar></footer-bar>

    </div>
</template>

<script>
    import { Promise } from 'es6-promise'
    import footerBar from '../components/FooterBar.vue'
    import contact from '../components/Contact.vue'
    import toYuan from '../filters/filter-toYuan'
    import mobile from '../filters/filter-mobile'
    import  { mapGetters, mapActions }  from 'vuex'
    import { userApi } from '../api/api'

    export default {
        components:{
            footerBar,
            contact
        },
        filters:{
            toYuan,
            mobile
        },
        data() {
            return {
                placeholder:'--',
                pageLoaded:false,
                mainInfo:{},
                placeholderImg:require('../images/loading_1.png'),
            }
        },
        computed:{
            ...mapGetters([
                'msgTip',
                'localInfo'
            ]),
            hasMain(){
                return !_.isEmpty(this.mainInfo)
            },
            userInfo(){
                return this.localInfo.userInfo
            },
            user(){
                return this.mainInfo.user || {}
            },
            borrowInfo(){
                return this.mainInfo.borrowInfo || {}
            },
            lendInfo(){
                return this.mainInfo.lendInfo || {}
            },
            receiptInfo(){
                return this.mainInfo.receiptInfo || {}
            },
            needLogin(){
                return this.localInfo.needLogin
            },
        },
        methods:{
            // actions
            ...mapActions([
                'showLoading',
                'hideLoading',
                'setMsgTip',
                'setSessionId',
                'setNeedLogin',
            ]),

            // function
            checkLogin(){
                if(this.needLogin){
                    this.$router.push({
                        name:'bind-phone'
                    })
                    return false
                }
                if(this.userInfo.user){
                    if(!this.userInfo.user.bizRole){
                        this.$router.push({
                            name:'id-select'
                        })
                        return false
                    }
                }
                return true
            },

            goRouter(name){
                if(!this.checkLogin()) return
                    
                this.$router.push({
                    name:name
                })
            },
            goUserMine(){

                this.$router.push({
                    name:'user-mine'
                })
            },
            goUserLoanIn(){
                if(!this.checkLogin()) return
                    
                this.$router.push({
                    name:'user-loan-in'
                })
            },
            goUserWithDraw(){
                if(!this.checkLogin()) return
                
                if(this.mainInfo.balance == ''){
                    this.setMsgTip({
                        text:'无可提现金额',
                        type:'warn'
                    })
                    return
                }
                this.$router.push({
                    name:'user-with-draw'
                })
            },
            goUserRecharge(){
                if(!this.checkLogin()) return
                    
                if(_.isEmpty(this.userInfo.bankcard)){
                    this.$router.push({
                        name:'user-bind-card-verified'
                    })
                    return
                }
                this.$router.push({
                    name:'user-recharge'
                })
            },
            goUserNoRepayment(){
                if(!this.checkLogin()) return
                    
                this.$router.push({
                    name:'user-no-repayment'
                })
            },
            goSuccess(){
                this.$router.push({
                    name:'loan-in-success'
                })
            },
            getMain(){
                this.showLoading()
                userApi.main()
                .then(result=>{
                    this.mainInfo = result
                    this.pageLoaded = true
                    this.hideLoading()
                })
                .catch(error => {
                    console.error(error)
                    this.pageLoaded = true
                    this.hideLoading()
                })
            },
        },
        created(){
            this.getMain()
        }
    }
</script>

<style lang="scss">
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";
    .user-index{
        .please-login{
            padding-left: 8px;
            .font-title{
                color:$importColor;
            }

        }
        .user-info{
            display: flex;
            align-items: center;
            padding: 16px;
            background-color: #fff;
            position: relative;
            border-bottom: 1px solid $sectionColor;
        }
        .user-avatar{
            width: 56px;
            height: 56px;
            box-sizing:border-box;
            border-radius:50%;
            border:1px solid $sectionColor;
        }
        .user-name{
            padding-left: 16px;
            flex:1;
            .name{
                @extend %font-subhead;
                color:$importColor;
            }
            .auth{
                @extend %font-caption;
            }
        }
        .user-icon{
            display: flex;
            position: absolute;
            top:9px;
            right:8px;
            span{
                display: block;
                width: 24px;
                height: 24px;
                padding:10px 8px;
                background: url(../images/icon-mail.png) no-repeat center center; 
                background-size: 20px auto;
                position: relative;
                &.user-option{
                    background: url(../images/icon_settings.png) no-repeat center center; 
                    background-size: 20px 20px;
                }
            }
            i{
                position: absolute;
                right:4px;
                top:8px;
                min-width: 14px;
                padding:0 4px;
                height: 14px;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 7px;
                font-size: 8px;
                box-sizing: border-box;
                background-color: $red;
                color:#fff;
            }
        }
        .user-money{
            background-color: #fff;
            display: flex;
            align-items: center;
            padding:12px 24px 12px 24px;
            &.voucher{
                overflow:hidden;
                padding:20px 24px;
                border-bottom: 1px solid $sectionColor;
                position: relative;
                &:after{
                    content:'';
                    opacity:.1;
                    position: absolute;
                    right:-44px;
                    top:50%;
                    margin-top:-32px;
                    width: 88px;
                    height: 64px;
                    background: url(../images/bg_voucher@3x.png) no-repeat right center;
                    background-size: 88px auto;
                }
            }
        }
        .user-money__left{
            @extend %font-body2;
        }
        .user-money__right{
            display: flex;
            align-items: center;
            justify-content: flex-end;
            flex:1;
            position: relative;
            z-index:1;
        }
        .user-money__number{
            display: flex;
            align-items: center;
            justify-content: flex-end;
            @extend %font-title;
            color:$importColor;
            &.voucher{
                @extend %font-headline;
                color:$orange;
                display: flex;
                align-items: flex-end;
                border-bottom: 1px solid;
                .unit{
                    @extend %font-body1;
                }
            }
            .iconfont{
                display: block;
                width: 24px;
                height: 24px;
                line-height:24px;
                text-align: center;
                padding-left: 8px;
                @extend %font-caption;
            }
        }
        .user-money__detail{
            margin-left: 24px;
            .iconfont{
                @extend %font-caption;
                display: block;
                font-size: 14px;
                width: 24px;
                height:24px;
                line-height:24px;
            }
        }
        .user-bottons{
            background-color: #fff;
            display: flex;
            justify-content: center;
            padding: 14px 16px;
            margin-bottom: 8px;
            &.flex-end{
                justify-content: flex-end;
            }
            .button{
                margin: 0;
                margin-left:15px;
                &:first-child{
                    margin-left: 0;
                }
            }
            .login-button{
                width: auto;
            }
        }
        .capital{
            display: flex;
            background-color: #fff;
            margin-bottom: 8px;
            &.iou{
                padding:14px 0;
                .capital__item{
                    position: relative;
                    &:after{
                        content:'';
                        border-left:1px solid $sectionColor;
                        position: absolute;
                        right:0;
                        top:50%;
                        height:36px;
                        margin-top:-18px;
                    }
                    &:last-child{
                        border:none;
                    }
                }
            }
        }
        .capital__left{
            width: 35%;
            text-align: center;
            padding:14px 0;
            position: relative;
            p{
                @extend %font-title;
                color:$orange;
                &.purple{
                    color:$purple;
                }
            }
            span{
                display: block;
                @extend %font-caption;
            }
            &:after{
                content:'';
                position: absolute;
                top:0;
                height:36px;
                left:100%;
                top:50%;
                transform:translate(0,-50%);
                border-left:1px solid $sectionColor;
            }
        }
        .capital__right{
            display: block;
            position: relative;
            flex:1;
        }
        .capital__right-box{
            position: absolute;
            top:0;
            height:100%;
            left:0;
            right:0;
            display: flex;
            align-items: center;
        }
        .capital__item{
            text-align: center;
            width: 20%;
            flex:1;
            p{
                @extend %font-subhead;
                color:$importColor;
            }
            span{
                display: block;
                @extend %font-caption;
            }

        }
        .user-slogen{
            padding-top: 16px;
            margin: 24px;
            border-top: 1px solid $sectionColor;
            overflow:hidden;
        }
        .user-slogen__item{
            width: (100%/3);
            float:left;
            display: flex;
            box-sizing:border-box;
            text-align: center;
            padding:0 5px;
            justify-content: center;
            align-items: center;
            font-size: 12px;
            color:$grayLight;
            img{
                width: 20px;
                height: 20px;
                margin-right: 8px;
            }
        }
    }

</style>
